(() => {
    new Vue({
        el: '#treeMap',
        data: {
            resdata: [], //返回的数据
            Data: [],//各专业数据
            DashujuArr: [],//大数据0
            JisuanjiyingyongArr: [],//计算机应用1
            RuanjiangongchengArr: [],//软件工程2
            RuanjianjishuArr: [],//软件技术3
            WangluogongchengArr: [],//网络工程4
            WangluojishuArr: [],//网络技术5
            WulianwangArr:[],//物联网6
            XinxiguanliArr: [],//信息管理7
            Arr: [],
            NUM: []

        },
        created() {
            this.conn()
        },
        mounted() {
            this.getData()
            this.drawEcharts()

        },
        methods: {
            //连接api
            conn() {
                axios
                    .all([
                        axios.get('http://localhost:8001/getTreeMap/getDashujuTreeMap'),
                        axios.get('http://localhost:8001/getTreeMap/classJisuanjiyingyongTreeMap'),
                        axios.get('http://localhost:8001/getTreeMap/classRuanjiangongchengTreeMap'),
                        axios.get('http://localhost:8001/getTreeMap/classRuanjianjishuTreeMap'),
                        axios.get('http://localhost:8001/getTreeMap/classWangluogongchengTreeMap'),
                        axios.get('http://localhost:8001/getTreeMap/classWangluojishuTreeMap'),
                        axios.get('http://localhost:8001/getTreeMap/classWulianwangTreeMap'),
                        axios.get('http://localhost:8001/getTreeMap/classXinxiguanliTreeMap'),
                    ])
                    .then(response => (
                        this.resdata = response
                        // console.log("response:", this.resdata)
                    ))
            },

            //解析resdata 解析后台数据
            getData() {
                setTimeout(() => {
                    // console.log("getData:", this.resdata)
                    for (i = 0; i < this.resdata.length; i++) {
                        this.Data.push(this.resdata[i].data)
                    }
                    // console.log("Data:", this.Data)
                    arr0 = this.Data[0]
                    arr1 = this.Data[1]
                    arr2 = this.Data[2]
                    arr3 = this.Data[3]
                    arr4 = this.Data[4]
                    arr5 = this.Data[5]
                    arr6 = this.Data[6]
                    arr7 = this.Data[7]

                    this.NUM.length = 0
                    num = 0
                    for (i = 0; i < arr0.length; i++) {
                        this.DashujuArr.push({
                            name: arr0[i].stu_class,
                            value: arr0[i].countId
                        })
                        num = num + arr0[i].countId

                    } this.NUM.push(num)

                    num = 0
                    for (i = 0; i < arr1.length; i++) {
                        this.JisuanjiyingyongArr.push({
                            name: arr1[i].stu_class,
                            value: arr1[i].countId
                        })
                        num = num + arr1[i].countId
                    }
                    this.NUM.push(num)

                    num = 0
                    for (i = 0; i < arr2.length; i++) {
                        this.RuanjiangongchengArr.push({
                            name: arr2[i].stu_class,
                            value: arr2[i].countId
                        })
                        num = num + arr2[i].countId
                    } this.NUM.push(num)

                    

                    num = 0
                    for (i = 0; i < arr3.length; i++) {
                        this.RuanjianjishuArr.push({
                            name: arr3[i].stu_class,
                            value: arr3[i].countId
                        })
                        num = num + arr3[i].countId
                    } this.NUM.push(num)

                    num = 0
                    for (i = 0; i < arr4.length; i++) {
                        this.WangluogongchengArr.push({
                            name: arr4[i].stu_class,
                            value: arr4[i].countId
                        })
                        num = num + arr4[i].countId
                    } this.NUM.push(num)


                    num = 0
                    for (i = 0; i < arr5.length; i++) {
                        this.WangluojishuArr.push({
                            name: arr5[i].stu_class,
                            value: arr5[i].countId
                        })
                        num = num + arr5[i].countId
                    } this.NUM.push(num)

                    num = 0
                    for (i = 0; i < arr6.length; i++) {
                        this.WulianwangArr.push({
                            name: arr6[i].stu_class,
                            value: arr6[i].countId
                        })
                        num = num + arr3[i].countId
                    } this.NUM.push(num)

                    num = 0
                    for (i = 0; i < arr7.length; i++) {
                        this.XinxiguanliArr.push({
                            name: arr7[i].stu_class,
                            value: arr7[i].countId
                        })
                        num = num + arr7[i].countId
                    } this.NUM.push(num)

                }, 500)
            },

            //=====echarts======
            drawEcharts() {
                setTimeout(() => {
                    myChart = echarts.init(document.getElementById('treeMap')),

                        testData = [
                            // 软件工程
                            {
                                name: '软件工程',
                                value: this.NUM[2],
                                children: this.RuanjiangongchengArr,
                                itemStyle: {
                                    color: new echarts.graphic.RadialGradient(
                                        0.5,
                                        0.5,
                                        1,
                                        [{
                                            offset: 0,
                                            color: '#192e47',
                                        },
                                        {
                                            offset: 1,
                                            color: '#06647D',
                                        },
                                        ],
                                        false
                                    ),
                                },
                                label: {
                                    color: '#ffffff',
                                },
                            },
                            // 计算机网络技术
                            {
                                name: '计算机网络技术',
                                value: this.NUM[5],
                                children: this.WangluojishuArr,
                                itemStyle: {
                                    color: new echarts.graphic.RadialGradient(
                                        0.5,
                                        0.5,
                                        1,
                                        [{
                                            offset: 0,
                                            color: '#502630',
                                        },
                                        {
                                            offset: 1,
                                            color: '#72353D',
                                        },
                                        ],
                                        false
                                    ),
                                },
                                label: {
                                    color: '#D06168',
                                },
                            },
                            // 计算机应用技术
                            {
                                name: '计算机应用技术',
                                value: this.NUM[1],
                                children: this.JisuanjiyingyongArr,
                                itemStyle: {
                                    color: new echarts.graphic.RadialGradient(
                                        0.5,
                                        0.5,
                                        1,
                                        [{
                                            offset: 0,
                                            color: '#051B32', // 0% 处的颜色
                                        },
                                        {
                                            offset: 1,
                                            color: '#05508A', // 100% 处的颜色
                                        },
                                        ],
                                        false
                                    ),
                                },
                                label: {
                                    color: '#0092FF',
                                },
                            },
                            // 软件技术
                            {
                                name: '软件技术',
                                value: this.NUM[3],
                                children:this.RuanjiangongchengArr,
                                itemStyle: {
                                    color: new echarts.graphic.RadialGradient(
                                        0.5,
                                        0.5,
                                        1,
                                        [{
                                            offset: 0,
                                            color: '#23203B',
                                        },
                                        {
                                            offset: 1,
                                            color: '#43396D',
                                        },
                                        ],
                                        false
                                    ),
                                },
                                label: {
                                    color: '#9065FD',
                                },
                            },
                            // 数据科学与大数据技术
                            {
                                name: '数据科学与大数据技术',
                                value: this.NUM[0],
                                children: this.DashujuArr,
                                itemStyle: {
                                    color: new echarts.graphic.RadialGradient(
                                        0.5,
                                        0.5,
                                        1,
                                        [{
                                            offset: 0,
                                            color: '#2C3E42',
                                        },
                                        {
                                            offset: 1,
                                            color: '#4E6170',
                                        },
                                        ],
                                        false
                                    ),
                                },
                                label: {
                                    color: '#7DA7BD',
                                },
                            },
                            // 网络工程
                            {
                                name: '网络工程',
                                value: this.NUM[4],
                                children:this.WangluogongchengArr,
                                itemStyle: {
                                    color: new echarts.graphic.RadialGradient(
                                        0.5,
                                        0.5,
                                        1,
                                        [{
                                            offset: 0,
                                            color: '#051B32', // 0% 处的颜色
                                        },
                                        {
                                            offset: 1,
                                            color: '#05508A', // 100% 处的颜色
                                        },
                                        ],
                                        false
                                    ),
                                },

                                label: {
                                    color: '#0092FF',
                                },
                            },
                            // 物联网工程
                            {
                                name: '物联网工程',
                                value: this.NUM[6],
                                children:this.WulianwangArr,
                                itemStyle: {
                                    color: new echarts.graphic.RadialGradient(
                                        0.5,
                                        0.5,
                                        1,
                                        [{
                                            offset: 0,
                                            color: '#294421',
                                        },
                                        {
                                            offset: 1,
                                            color: '#3F6B30',
                                        },
                                        ],
                                        false
                                    ),
                                },
                                label: {
                                    color: '#77B05F',
                                },
                            },
                            // 信息管理与信息系统
                            {
                                name: '信息管理与信息系统',
                                value: this.NUM[7],
                                children:this.XinxiguanliArr,
                                itemStyle: {
                                    color: new echarts.graphic.RadialGradient(
                                        0.5,
                                        0.5,
                                        1,
                                        [{
                                            offset: 0,
                                            color: '#23203B',
                                        },
                                        {
                                            offset: 1,
                                            color: '#43396D',
                                        },
                                        ],
                                        false
                                    ),
                                },
                                label: {
                                    color: '#9065FD',
                                },
                            },

                        ];

                    function colorMappingChange(value) {
                        var levelOption = getLevelOption(value);
                        chart.setOption({
                            series: [{
                                levels: levelOption,
                            },],
                        });
                    }

                    var formatUtil = echarts.format;

                    function getLevelOption() {
                        return [{
                            itemStyle: {
                                normal: {
                                    borderWidth: 0,
                                    // gapWidth: 5//间距
                                },
                            },
                        },
                        {
                            itemStyle: {
                                normal: {
                                    // gapWidth: 1
                                },
                            },
                        },
                        {
                            colorSaturation: [0.35, 0.5],
                            itemStyle: {
                                normal: {
                                    // gapWidth: 1,
                                    borderColorSaturation: 0.6,

                                },
                            },
                        },
                        ];
                    }


                    var option = {
                        // backgroundColor:'#040042',
                        tooltip: {
                            show: true,
                            formatter: function (info) {
                                var value = info.value;
                                var treePathInfo = info.treePathInfo;
                                var treePath = [];

                                for (var i = 1; i < treePathInfo.length; i++) {
                                    treePath.push(treePathInfo[i].name);
                                }

                                return [
                                    '<div class="tooltip-title">' + formatUtil.encodeHTML(treePath.join('/')) +
                                    '</div>',
                                    '人数: ' + formatUtil.addCommas(value),
                                ].join('');
                            },
                        },

                        series: [{
                            // name:'平面图',			
                            type: 'treemap',
                            visibleMin: 300,
                            leafDepth: 1,
                            label: {
                                show: true,
                                formatter: '{b}',
                                fontSize: 20,
                            },
                            itemStyle: {


                            },
                            levels: getLevelOption(),
                            data: testData,
                        },],
                    };

                    myChart.setOption(option);
                    window.addEventListener("resize", function () {
                        myChart.resize();
                    });
                }, 600)
            }
            //=====echarts======



        },



    })
})();